/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {StyleSheet, View, TextInput, TouchableHighlight, Dimensions} from 'react-native';
import { Button, Icon, Toast, Picker, List } from 'antd-mobile-rn';

// project
import {
    Page, Content, Text, Row, Header, Footer, Between, Hand, TouchOpacity
} from '../../../../library'
import HttpTemp from "../../../../preset/func/http/httptemp"

/******************************************************************************************
 * Export Class
 ******************************************************************************************/
const Scwidth = Dimensions.get('window').width;
const ScHeight = Dimensions.get('window').height;

export default class House extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
		this.state = {
            //VercodeText
			VercodeTime:120,
			VercodeText:"获取验证码",
			VercodeActive:true,

            //姓名
            name:'',
            code:'',

            // 身份picker的变量
            family:[
                {label:'家属',value:'家属'},
                {label:'户主',value:'户主'},
                {label:'租客',value:'租客'}
            ],
            // 身份选择时更改的value
            familyvalue:[],

            //小区默认值  默认值
            buildinglist:[
                {label:'珑城花园',value:'珑城花园'},
            ],            

            buildingvalue:['珑城花园'],

            //房屋和单元  数组
            unitroomlist:[],

            //房屋和单元  默认值
            unitroomval:[],


            //自己的手机号  户主需要
            selfmobile:"",

            //户主的手机号  自己需要
            housematermobile:"",

		};
    }

    componentDidMount(){


        //获取 单元房子的数组
        HttpTemp.get({
            url:"/page/house/getunithouse.php",
            data:{
                fk_subdistrict_id:1,
            },
            success:(res) => {
                let data = res.data;
                for(var key in data){
                    data[key]['label'] = data[key]['set_name'];
                    data[key]['value'] = data[key]['id'];
                    let house = data[key]['house'];

                    for(var hkey in house){
                        house[hkey]['label'] = house[hkey]['set_name'];
                        house[hkey]['value'] =  house[hkey]['id'];
                    }

                    data[key]['children'] = house;
                }
                this.setState({
                    unitroomlist:data
                })

                console.log(data);

            }
        })

        //获取自己的手机号码
        HttpTemp.get({
            url:"/page/user/detail.php",
            success:(res) => {
                let data = res.data;
                this.setState({
                    selfmobile:data.set_mobile
                });    
            }
        })




    }

    //获取户主信息
    getHousemaster = (id)=>{
        //获取户主的手机号
        let that = this;
        HttpTemp.get({
            url:"/page/myhouse/gethost.php",
            data:{
                id: id
            },
            success:(res) => {
                console.log(res);
                let data = res.data;
                this.setState({
                    housematermobile:data.set_mobile
                });    
            },
            error: {
                code: (res)=> {
                    that.setState({
                        housematermobile:""
                    })    
                    Toast.info(res.msg,2);
                }
            }
        })

    }


	/**
	 * 点击获取验证码
	 */
	getVerCode = ()=>{

		let time = this.state.VercodeTime;
		let text = this.state.VercodeText;
		let time_time = "秒后重发";

		if(this.state.VercodeActive){
			//发送短信接口
			this.setState({
				VercodeTime:time,
				VercodeText:time + time_time,
				VercodeActive:false,
			})

            HttpTemp.post({

                url:"/page/myhouse/logic/sendmsg.php",
                data:{
                    set_mobile:this.state.housematermobile
                },
                success:(res) => {
                    Toast.info('成功发送验证码');
                },
                error: {
                    code: (res)=> {
                        Toast.info(res.msg,2);
                    }
                }
    
            })
    


			Runtime = ()=>{
				setTimeout(()=>{
					if(this.state.VercodeTime > 1){
						this.setState({
							VercodeTime:this.state.VercodeTime - 1,
							VercodeText:this.state.VercodeTime - 1 + time_time,
							VercodeActive:false,
						})
						Runtime();	
					}else{
						this.setState({
							VercodeTime:time,
							VercodeText:text,
							VercodeActive:true,
						})	
					}	
				},1000);		
			}
			Runtime();
		}
    }
    

    submitInfo(){
        if(this.state.unitroomval.length == 0){
            Toast.info('请选择楼栋房号');
            return;
        }
        if(this.state.familyvalue.length == 0){
            Toast.info('请选择身份');
            return;
        }
        if(this.state.familyvalue.length == 0){
            Toast.info('请选择身份');
            return;
        }

        if(this.state.name == ""){
            Toast.info('请选填写姓名');
            return;
        }


        let data = {
            fk_house_id:this.state.unitroomval[1],
            enum_apply_status:this.state.familyvalue[0],
            set_apply_name:this.state.name,
        };
        if(this.state.familyvalue[0] == "家属" && this.state.familyvalue[0] == "租客"){
            if(this.state.code == ""){
                Toast.info('请选填验证码');
                return;
            }
    
            data['set_mobile'] = this.state.housematermobile;
            data['code'] = this.state.code;
        }   

        HttpTemp.post({

            url:"/page/myhouse/logic/apply.php",
            data:data,
            success:(res) => {
                Toast.info("已提交申请", 2);
                this.Nav.navigate('UserSettingHouse');
            },
            error: {
                code: (res)=> {
                    Toast.info(res.msg,2);
                }
            }

        })




    }



    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 选择身份晚上时单击确定按钮出发的事件
     */
    identity = (value)=>{
        this.setState({
            value:value
        })
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>

                {/* 内容部分 */}
				<Content my='40' bg='#efeff4' >

                    {/* 房屋信息 */}
                    <Row y='center' pa='10'>
                        <Text style={{ color:"#999" }}>房屋信息</Text>
                    </Row>

                    {/* 房屋认证所需内容 */}
                    <View style={{backgroundColor:'#fff'}}>
                        {/* 选择小区 */}
                        <List style={{ height:50, justifyContent:"center" }}>
                            <Picker
                                data={this.state.buildinglist}
                                value={this.state.buildingvalue}
                                cols={1}
                                onChange={(val)=>{
                                }}
                            >
                                <List.Item arrow="horizontal" last>
                                    <Text size='16'>小区</Text>
                                </List.Item>
                            </Picker> 
                        </List>

                        {/* 选择楼栋和房号 */}

                        <List style={{ height:50, justifyContent:"center" }}>
                            <Picker
                                data={this.state.unitroomlist}
                                value={this.state.unitroomval}
                                cols={2}
                                onChange={(val)=>{
                                    val[1] = parseInt(val[1]);
                                    this.setState({
                                        unitroomval:val
                                    })

                                    this.getHousemaster(val[1]);

                                }}
                            >
                                <List.Item arrow="horizontal" last>
                                    <Text size='16'>楼栋房号</Text>
                                </List.Item>
                            </Picker> 
                        </List>

                        <List style={{ height:50, justifyContent:"center" }}>
                            <Picker
                                data={this.state.family}
                                value={this.state.familyvalue}
                                cols={1}
                                onChange={(val)=>{
                                    this.setState({
                                        familyvalue:val
                                    })

                                }}
                            >
                                <List.Item arrow="horizontal" last>
                                    <Text size='16'>身份</Text>
                                </List.Item>
                            </Picker> 
                        </List>



                    </View>
                    
                    {/* 个人信息标题 */}
                    <Row y='center' pa='10'>
                        <Text style={{ color:"#999" }}>个人信息</Text>
                    </Row>

                    {/* 个人信息所需内容 */}
                    <View style={{backgroundColor:'#fff'}}>

                        {/* 真实姓名 */}
                        <Row mx='10' bb='1 #f0f0f0' px='10' h='50' y='center'>
                            <Between>
                                <Hand y='center'>
                                    <Text size='16'>姓名</Text>
                                </Hand>
                                <Hand y='center'>
                                    <TextInput
                                    defaultValue={this.state.name}
                                    onChangeText={(val)=>{
                                        this.setState({
                                            name:val
                                        })
                                    }}
                                    placeholder='请输入您的真实姓名' underlineColorAndroid='transparent' style={{width:160, fontSize:16, textAlign:"right"}}></TextInput>
                                </Hand>
                            </Between>
                        </Row>

                        <Row mx='10' px='10' h='50' y='center'>
                            <Between>
                                <Hand y='center'>
                                    <Text size='16'>我的手机号码</Text>
                                </Hand>
                                <Hand y='center'>
                                    <Text size='16'>{this.state.selfmobile}</Text>
                                </Hand>
                            </Between>
                        </Row>

                        <Row mx='10' px='10' h='50' y='center'>
                            <Between>
                                <Hand y='center'>
                                    <Text size='16'>户主手机号码</Text>
                                </Hand>
                                <Hand y='center'>
                                    <Text size='16'>{this.state.housematermobile}</Text>
                                </Hand>
                            </Between>
                        </Row>

                        <Row mx='10' px='10' h='50' y='center'>
                            <Between>
                                <Hand y='center'>
                                    <TextInput
                                    defaultValue={this.state.code}
                                    onChangeText = {(val)=>{
                                        this.setState({
                                            code:val
                                        })
                                    }}
                                    placeholder='请输入验证码' underlineColorAndroid='transparent' style={{width:160, fontSize:16, textAlign:"left"}}></TextInput>
                                </Hand>
                                <Hand y='center'>
                                    <TouchableHighlight 
                                        underlayColor="rgba(0,0,0,0)"
                                        onPress={this.getVerCode}
                                    >
                                        <Text style={[style.green, {fontSize:12}]}>{this.state.VercodeText}</Text>
                                    </TouchableHighlight>
                                </Hand>
                            </Between>
                        </Row>




                    </View>

                    {/* 提交按钮 */}
                    <View style={{margin:30}}>
                        <Button onClick={()=>{
                            this.submitInfo()
                        }} style={{backgroundColor:'#21ac43', borderWidth:0, height:40}}><Text color='#fff' size='16'>提交</Text></Button>
                    </View>

				</Content>
				
                {/* 头部 */}
				<Header bg='#fff' h='40'>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>房屋认证</Text>
                        <Text> </Text>
                    </Between>
                </Header>

				{/* 底部 */}
				<Footer bg='#fff' h='40'></Footer>
                
			</Page>
		);
	}
}

const style = StyleSheet.create({
	green:{
        color:"#00CC66",
	},
	gray:{
		color:"#AEAEAE"
	},
	topText:{
		fontSize:20
	},
	topTextActive:{
		borderBottomColor:'#00CC66',
		borderBottomWidth:2,
	},
})